<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> 
<head>
    <!--Bootstrap-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--bootstrap Select-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
    <!--select2-->
    <link href="https://cdn.bootcss.com/select2/4.0.3/css/select2.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/select2/4.0.3/js/select2.js"></script>
    <!--edit-->
    <link rel="stylesheet" href="/css/editormd.css" />
    <script src="/js/editormd.js"></script>
    <!--文本编辑-->
    <link href="/css/bootstrap-editable.css" rel="stylesheet" />
    <script src="/js/bootstrap-editable.min.js"></script>
    <!--滚动条-->
    <script src="https://cdn.bootcss.com/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
    <!--Tree-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <!--Jquery Table-->
    <link href="https://cdn.bootcss.com/datatables/1.10.15/css/dataTables.jqueryui.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
    <!--Bootstrap Table-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <!--bootstrap datepicker-->
    <link rel="stylesheet" href="/css/bootstrap-datepicker.min.css" />
    <script src="/js/bootstrap-datepicker.min.js"></script>
    <script src="/js/bootstrap-datepicker.zh-CN.min.js"></script>
    <!--bootstrap page-->
    <script src="/js/bootstrap-paginator.min.js"></script>
    <!----layer ui-->
    <link rel="stylesheet" href="/js/layui/css/layui.css" />
    <script src="/js/layui/layui.all.js"></script>
    <script src="/js/layui/layui.js"></script>
	<script src="https://cdn.bootcss.com/knockout/3.4.2/knockout-min.js"></script>
	<script src="https://cdn.bootcss.com/knockout.mapping/2.4.1/knockout.mapping.js"></script>
    <title>Hello World!</title>
</head>
<body>



<hr/>
<h3 style="text-align: center;">Jquery  Table组件！</h3>

<div class="row">
<div class="col-sm-3" style="border: 1px solid red; height: 400px;">
</div>
<div class="col-sm-6" style="border: 1px solid red; height: auto;">
	<table id="example" class="display" cellspacing="0" width="100%">
	    <thead>
	    <tr>
	    	<th>序号</th>
	        <th>名称</th>
	        <th>版本号码</th>
	        <th>内容</th>
	        <th>集合</th>
	        <th>开始时间</th>
	        <th>修改时间</th>
	        <th>操作</th>
	    </tr>
	    
	    </tbody>
	    
	</table>
</div>
</div>

<INPUT data-bind="value :personName"/>
<span data-bind="text: personName,click:myClick">knockout 异步改变</span>

<script type="text/javascript">
function  myViewModel() {
		var self = this;
	    self.personName= ko.observable();
	    self.personName="哦哦哦哦";
	    self.personAge= 123;
	    self.myClick = function (){
	    	self.personName = "钟林";
	    }
	    var bind = function (){
	    	console.log("log");
	    	ko.applyBindings(new myViewModel());
	    }
	    bind();
	};
	new myViewModel();


	


function initTable(){
	console.log("2");
    //设置表格插件！
        $('#example').DataTable( {
            "oLanguage": {
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "对不起，查询不到任何相关数据",
                "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                "sInfoEmtpy": "找不到相关数据",
                "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
                "sProcessing": "正在加载中...",
                "sSearch": "搜索",
                "sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
                "oPaginate": {
                    "sFirst": "第一页",
                    "sPrevious": " 上一页 ",
                    "sNext": " 下一页 ",
                    "sLast": " 最后一页 "
                }
            }, //多语言配置
            bSort:true,
            ordering:true,//排序
            "bAutoWidth" : false, // 自动计算列宽度  
            "sScrollX": "100%",
            "sScrollXInner": "190%",
            "bScrollCollapse": true,//水平滚动 
            "bFilter": false,//去掉搜索框  
            "bStateSave": false,//使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容
            "bPaginate": true,//显示分页条
            "sPaginationType": "full_numbers",
            "serverSide":true,    //true代表后台处理分页，false代表前台处理分页 
            /*  "ajax": {
                "type":"get",
                "url":"/user/config"
            },  */
            "sAjaxSource": "/user/config",//请求的地址
            "fnServerData": function (sSource, aoData, fnCallback){
            	aoData.push({"parameter":$("#tmp").val()});
            	 $.ajax({
                     "type" : "GET",  
                     "contentType" : "application/json",  
                     "url" : sSource,  
                     "dataType" : "json",  
                     "data" : {"aopData":JSON.stringify(aoData)},  
                     "success" : fnCallback  
                 }); 
            },
            "columns": [
				{ "data": "id",width:"10%",visible : true},
                { "data": "name",width:"10%"},
                { "data": "version",width:"10%"},
                { "data": "content" ,width:"10%"},
                { "data": "list" ,width:"10%"},
                { "data": "starTime" ,width:"15%"},
                { "data": "updateTime" ,width:"15%" }
            ],
            columnDefs:[
            {
             title:"内容",
             width: "10%",
             targets: 3,
             data:"content",
             render: function (data, type, row, meta) {
                 return '<span id="content" style="color:red">'+data+'</span>';
             	} 
            },      
            {
                title:"",
                width: "20%",
                targets: 7,
                data:"",
                render: function (data, type, row, meta) {
                    var html = '<button class="btn btn-info" href="#" id="edit"><span class="glyphicon glyphicon-search"></span>编辑</button>'+'&nbsp'+
                        '<button  class="btn btn-success" href="#" id="down"><span class="glyphicon glyphicon-pencil"></span>下发</button>'+'&nbsp'+
                        '<button class="btn btn-danger" href="#" id="delete"> <span class="glyphicon glyphicon-trash"></span>删除</button>'+'<input type="hidden" id="rowTmp">'
                    ;
                    return html;
                } 
            }
            ]

        } );
    }
    


    
function myClick(){
	//new initTable();
	$('#example').DataTable().ajax.reload();
}

  $(function (){
  //初始化表格
  console.log("load");
  new initTable();
    
    
  //编辑
    $('#example tbody').on( 'click', '#edit', function () {
        var data = $('#example').DataTable().row($(this).closest('tr')).data();
        alert("编辑："+JSON.stringify(data));
    } );

    //下发
    $('#example tbody').on( 'click', '#down', function () {
        var data = $('#example').DataTable().row($(this).closest('tr')).data();
        alert("下发："+JSON.stringify(data));
    } );

    //删除
    $('#example tbody').on( 'click', '#delete', function () {
        var data = $('#example').DataTable().row($(this).closest('tr')).data();
        alert("删除："+JSON.stringify(data));
    } );

    //隐藏头部 切换页码
    $(".dataTables_length").hide();

    //显示 toop  mouseover
    $('#example tbody').on( 'click', '#content', function () {
        var data = $('#example').DataTable().row($(this).closest('tr')).data();
        var htmlTpl = '<div style="width: 150px;height: 100px;">'+data.content+'</div>';
        $(this).attr("data-placement","bottom").attr("data-html",true).attr("title",htmlTpl);
        //$("[role='tooltip']").css("background-color","yellow");
        $(this).tooltip("show");
        
    });
    
  })

</script>





</body>
</html>